<template>
  <div>
    <header>
      <div class="box">
        <div class="box1">
          <div class="name">
            <img :src="userInfo.avatar" alt="" />
            <p>{{ userInfo.nickname }} <van-icon name="edit" /></p>
          </div>
          <h4>去约课</h4>
        </div>
        <ul>
            <li>
                <span class="sp">4</span>
                <p>我的特色课</p>
                <span>已购买特色课程.</span>
            </li>
            <li>
                <span class="sp">0</span>
                <p>一对一辅导</p>
                <span>我的一对一老师...</span>
            </li>
            <li>
                <span class="sp">0.00</span>
                <p>剩余学习币</p>
                <span>查看剩余学习币</span>
            </li>
        </ul>
      </div>
    </header>
    
  </div>
</template>

<script>
import { Field, Button, Form, Icon } from "vant";
import { userInfo } from "../request/http";
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  methods: {},
  created() {
    userInfo().then((res) => {
      console.log(res);
      this.userInfo = res;
      console.log(this.userInfo);
    });
  },
  mounted() {},
  components: {
    [Icon.name]: Icon,
  },
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
header {
  position: relative;
  width: 100%;
  height: 20vh;
  background-color: #fc5500;
  border-radius: 0 0 40% 40%;
  .box {
    width: 90%;
    height: 200px;
    background-color: #fff;
    position: absolute;
    left: 50%;
    top: 40px;
    margin-left: -45%;
    .box1 {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      box-sizing: border-box;
      padding: 10px 0 10px 10px;
      .name {
        height: 40px;
        display: flex;
        align-items: center;
        p {
          height: 40px;
          line-height: 40px;
          i {
            color: #fc5500;
          }
        }
        img {
          width: 30px;
          height: 30px;
          margin-right: 1rem;
        }
      }
      h4{
        background-color: #fc5500;
        width: 40px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        color: #fff;
        border-radius: 5px 0 0 5px;
      }
    }
    ul{
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-around;
        li{
            width: 30%;
            height: 100px;
            border: 1px solid #ccc;
            text-align: center;
            padding-top: 20px;
            box-sizing: border-box;
            .sp{
                color: #fc5500;
                font-size: 16px;
            }
            span{
                color: rgb(177, 175, 175);
            }
        }
    }
  }
}
</style>
